<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui" 
      xmlns:comps="http://java.sun.com/jsf/composite/comps"
      xmlns:h="http://java.sun.com/jsf/html" 
      xmlns:f="http://java.sun.com/jsf/core" >
    
    <body>

        <ui:composition template="./../../resources/templates/newTemplate.xhtml">

            <ui:define name="left" id="panel" >
                <comps:miPanel id="menu" />
            </ui:define>

            <ui:define name="principal">
                <p:growl id="growl" globalOnly="true" />

                <div style="margin: 0 30px" >
                    <p:tabView id="tab" dynamic="true"  >

                        <p:tab title="Información Básica" >

                            <p:outputPanel id="panelInfo" >
                                <h:panelGrid columns="2" cellpadding="2" columnClasses="labelColumn2,fieldColumn"
                                             rendered="#{not modUsuario.editando}" >

                                    <h:outputLabel value="Nombre" />
                                    <h:outputText value="#{modUsuario.usuario.nombre}" />

                                    <h:outputLabel value="Apellido" />
                                    <h:outputText value="#{modUsuario.usuario.apellido}" />

                                    <h:outputLabel value="DNI" />
                                    <h:outputText value="#{modUsuario.usuario.dni}"/>

                                    <h:outputLabel value="Email" />
                                    <h:outputText value="#{modUsuario.usuario.email}" />

                                    <h:outputLabel value="Telefono" />
                                    <h:outputText value="#{modUsuario.telefono}" />

                                    <h:outputLabel value="Fecha de nacimiento" />
                                    <h:outputText value="#{modUsuario.fechaNacimiento}" >
                                        <f:convertDateTime pattern="dd/MM/yyyy" />
                                    </h:outputText>
                                </h:panelGrid>

                                <div style="position: absolute; top: 40px; right: 5px">
                                    <h:form id="btnForm">
                                        <p:commandButton icon="ui-icon-pencil" actionListener="#{modUsuario.editar}"
                                                         style="font-size: 11px" update=":tab:panelInfo :tab:panelEdit @this"
                                                         rendered="#{not modUsuario.editando}"/>
                                    </h:form>
                                </div>
                            </p:outputPanel>

                            <p:outputPanel id="panelEdit" >
                                <h:form rendered="#{modUsuario.editando}" >
                                    <h:panelGrid columns="3" cellpadding="2" columnClasses="labelColumn2,fieldColumn" >

                                        <h:outputLabel value="Email" />
                                        <h:outputText value="#{modUsuario.usuario.email}" />
                                        <p/>                                        
                                        
                                        <h:outputLabel value="Nombre" for="nombre" />
                                        <p:inputText id="nombre" value="#{modUsuario.nombre}" 
                                                     required="true" requiredMessage="Valor requerido" />
                                        <p:message for="nombre" />

                                        <h:outputLabel value="Apellido" for="apellido" />
                                        <p:inputText id="apellido" value="#{modUsuario.apellido}" 
                                                     required="true" requiredMessage="Valor requerido" />
                                        <p:message for="apellido" />

                                        <h:outputLabel value="DNI" for="dni" />
                                        <p:inputText id="dni" value="#{modUsuario.dni}"/>
                                        <p:message for="dni" />

                                        <h:outputLabel value="Telefono" for="telefono" />
                                        <p:inputText id="telefono" value="#{modUsuario.telefono}" />
                                        <p:message for="telefono" />

                                        <h:outputLabel value="Fecha de nacimiento" for="fechaNac" />
                                        <p:calendar id="fechaNac" value="#{modUsuario.fechaNacimiento}"
                                                    pattern="dd/MM/yyyy" locale="es" navigator="true" />
                                        <p:message for="fechaNac" />

                                        <f:facet name="footer">
                                            <p:commandButton value="Aceptar" actionListener="#{modUsuario.actualizarInfo}"
                                                             update=":tab:panelInfo :tab:panelEdit :tab:btnForm" />
                                            <p:commandButton value="Cancelar" actionListener="#{modUsuario.cancelarEdicion}"
                                                             immediate="true" update=":tab:panelInfo :tab:panelEdit :tab:btnForm" />
                                        </f:facet>
                                    </h:panelGrid>
                                </h:form>
                            </p:outputPanel>

                        </p:tab>

                        <p:tab title="Dirección" >

                            <p:outputPanel id="panelDir"  >

                                <h:outputText value="Aun no has cargado ninguna dirección" style="color: gray; font-style: italic"
                                              rendered="#{empty modUsuario.domicilio}" />
                                <div >
                                    <div style="float:left; margin-right: 80px">
                                        <h:panelGrid columns="2" cellpadding="2" columnClasses="labelColumn3,fieldColumn"
                                                     rendered="#{not modUsuario.editandoDir and not empty modUsuario.domicilio}" >

                                            <h:outputLabel value="Pais" for="pais" />
                                            <h:outputText  value="#{modUsuario.domicilio.pais}" />

                                            <h:outputLabel value="Provincia" for="provincia" />
                                            <h:outputText value="#{modUsuario.domicilio.provincia}" />

                                            <h:outputLabel value="Ciudad" />
                                            <h:outputText value="#{modUsuario.domicilio.ciudad}"/>

                                            <h:outputLabel value="Barrio"  />
                                            <h:outputText value="#{modUsuario.domicilio.barrio}" />

                                            <h:outputLabel value="Calle" />
                                            <h:outputText value="#{modUsuario.domicilio.calle}" />

                                            <h:outputLabel value="Numero" />
                                            <h:outputText value="#{modUsuario.domicilio.numero}" />

                                            <h:outputLabel value="Piso" />
                                            <h:outputText value="#{modUsuario.domicilio.piso}"/>

                                            <h:outputLabel value="Depto" />
                                            <h:outputText value="#{modUsuario.domicilio.depto}" />
                                        </h:panelGrid>
                                    </div>
                                    <div style="margin-left: 10px">
                                        <p:gmap center="#{modUsuario.domicilio.latitud},#{modUsuario.domicilio.longitud}"
                                                zoom="15" type="HYBRID" style="width:300px;height:200px;"
                                                model="#{modUsuario.gMap}"
                                                rendered="#{not modUsuario.editandoDir and not empty modUsuario.domicilio}">

                                        </p:gmap> 
                                    </div>
                                    <div style="position: absolute; right: 10px; top: 40px">
                                        <h:form id="btnForm2">
                                            <p:commandButton icon="ui-icon-pencil" actionListener="#{modUsuario.editarDir}"
                                                             style="font-size: 11px" update=":tab:panelDir :tab:panelDirEdit @this"
                                                             rendered="#{not modUsuario.editandoDir}"/>
                                        </h:form>
                                    </div>
                                </div>
                            </p:outputPanel>

                            <p:outputPanel id="panelDirEdit" >
                                <h:form prependId="false" rendered="#{modUsuario.editandoDir}" >
                                    <h:panelGrid columns="3" cellpadding="2" columnClasses="labelColumn2,fieldColumn" >

                                        <h:outputLabel value="Pais" for="pais" />
                                        <p:selectOneMenu id="pais" value="#{modUsuario.paisSeleccionado}" required="true"
                                                         requiredMessage="Valor requerido" >  
                                            <f:selectItem itemLabel="Seleccione un pais" itemValue="" />
                                            <f:selectItems value="#{modUsuario.paises}" />
                                            <p:ajax event="change" update="provincia" process="@this"
                                                    listener="#{modUsuario.actualizarProvincias}" />
                                        </p:selectOneMenu>
                                        <p:message for="pais" />

                                        <h:outputLabel value="Provincia" for="provincia" />
                                        <p:selectOneMenu id="provincia" value="#{modUsuario.provinciaSeleccionada}" 
                                                         required="true" requiredMessage="Valor requerido" >
                                            <f:selectItem itemLabel="Seleccione una provincia" itemValue="" />
                                            <f:selectItems value="#{modUsuario.provincias}" />
                                            <p:ajax event="change" process="@this" />
                                        </p:selectOneMenu>
                                        <p:message for="provincia" />

                                        <h:outputLabel value="Ciudad" for="ciudad" />
                                        <p:inputText id="ciudad" value="#{modUsuario.ciudad}"
                                                     required="true" requiredMessage="Valor requerido" />
                                        <p:message for="ciudad" />

                                        <h:outputLabel value="Barrio" for="barrio" />
                                        <p:inputText id="barrio" value="#{modUsuario.barrio}" 
                                                     required="true" requiredMessage="Valor requerido" />
                                        <p:message for="barrio" />

                                        <h:outputLabel value="Calle" for="calle" />
                                        <p:inputText id="calle" value="#{modUsuario.calle}"
                                                     required="true" requiredMessage="Valor requerido" />
                                        <p:message for="calle" />

                                        <h:outputLabel value="Numero" for="numero"/>
                                        <p:inputText id="numero" value="#{modUsuario.numero}"
                                                     required="true" requiredMessage="Valor requerido" />
                                        <p:message for="numero" />

                                        <h:outputLabel value="Piso" for="piso"/>
                                        <p:inputText id="piso" value="#{modUsuario.piso}"/>
                                        <p:message for="piso" />

                                        <h:outputLabel value="Depto" for="depto"/>
                                        <p:inputText id="depto" value="#{modUsuario.depto}"/>
                                        <p:message for="depto" />
                                        <p:commandButton type="button" icon="ui-icon-pin-s" 
                                            value="ver Mapa" onclick="mapDialog.show()"/>
                                        <f:facet name="footer">
                                            <p:commandButton value="Aceptar" actionListener="#{modUsuario.actualizarDomicilio}"
                                                             update=":tab:panelDir :tab:panelDirEdit :tab:btnForm2" />
                                            <p:commandButton value="Cancelar" actionListener="#{modUsuario.cancelarEdicionDir}"
                                                             immediate="true" update=":tab:panelDir :tab:panelDirEdit :tab:btnForm2" />
                                        </f:facet>
                                    </h:panelGrid>
                                    <h:inputHidden id="lat" value="#{modUsuario.lat}" />  
                                    <h:inputHidden id="lng" value="#{modUsuario.lng}" /> 
                                </h:form>
                            </p:outputPanel>

                        </p:tab>

                        <p:tab title="Cambiar contraseña" >

                            <h:form id="formCambiarPass" >
                                <h:panelGrid columns="3" columnClasses="labelColumn,fieldColumn" 
                                             style="text-align: center" >

                                    <h:outputLabel value="Contraseña actual:" />
                                    <p:password id="passViejo" value="#{passwordBean.password}"
                                                minLength="4" feedback="false" required="true"
                                                requiredMessage="Campo requerido" />
                                    <p:message for="passViejo" />
                                    <h:outputLabel value="Contraseña nueva:" />
                                    <p:password id="passNuevo" value="#{passwordBean.passwordNuevo}"
                                                minLength="6" feedback="true" required="true" 
                                                match="passNuevo2" validatorMessage="Las contraseñas no coinciden"
                                                requiredMessage="Campo requerido"/>
                                    <p:message for="passNuevo" />
                                    <h:outputLabel value="Repita contraseña nueva:" />
                                    <p:password id="passNuevo2" value="#{passwordBean.passwordNuevo2}"
                                                minLength="6" feedback="false" required="true"
                                                requiredMessage="Campo requerido"/>
                                    <p:message for="passNuevo2" />

                                    <f:facet name="footer" >
                                        <p:commandButton value="Cambiar" action="#{passwordBean.cambiarPassword}" 
                                                         ajax="false" />
                                    </f:facet>

                                </h:panelGrid>



                            </h:form>

                        </p:tab>

                        <p:tab title="Elegir imagen de perfil">
                            <h:form id="formSubirImagen">
                               
                                <p:selectOneRadio id="radioPicture" value="#{modUsuario.pictureSelected}" layout="custom" >
                                    <f:selectItem itemLabel="option 1" itemValue="1" />
                                    <f:selectItem itemLabel="option 2" itemValue="2"/>
                                </p:selectOneRadio>
                                
                                <p:panelGrid id="panelFoto" columns="6" styleClass="iu-panelgrid">

                                    <p:radioButton id="opt1" for="radioPicture" itemIndex="0" /> 
                                    <h:outputLabel for="opt1" value="Foto Facebook" />
                                <h:graphicImage styleClass="image" rendered="#{not empty login.fbId}" 
                                                    value="https://graph.facebook.com/#{login.fbId}/picture?type=large" />
                                    <h:graphicImage styleClass="image" rendered="#{empty login.fbId}"
                                                    value="#{resource['images:no_user.jpg']}" />

                                    <p:radioButton id="opt2" for="radioPicture" itemIndex="1"/> 
                                    <h:outputLabel for="opt2" value="Foto Local  " />

                                    <p:graphicImage value="/imageUser?id=#{modUsuario.imagenUsuarioId}" styleClass="image" 
                                                    cache="false" rendered="#{not empty modUsuario.imagenUsuarioId}"/>
                  
                                    <p:graphicImage styleClass="image" rendered="#{empty modUsuario.imagenUsuarioId}"
                                                    value="#{resource['images:no_user.jpg']}"/>


                                        
                                </p:panelGrid>
                                <p:commandButton value="Guardar" actionListener="#{modUsuario.actualizarFoto}" 
                                                         update=":growl :menu:menu" style="margin-right: 20px; height: 28px; "/>

                                <div style="position: absolute; right: 10px; top: 40px">
                                    <p:commandButton type="button" icon="ui-icon-pencil" 
                                                     style="font-size: 11px" onclick="cargarImagenDlg.show()" 
                                                     title="Cargar Nueva Foto!"/>
                                </div>
                            </h:form>

                        </p:tab>

                    </p:tabView>

                    <p:dialog widgetVar="cargarImagenDlg" header="Subir Nueva Imagen" modal="true" 
                              resizable="false" style="text-align: center;">
                        <h:form>
                            <p:fileUpload fileUploadListener="#{modUsuario.handleFileUpload}"  
                                          mode="advanced" oncomplete="cargarImagenDlg.hide()"
                                          label="Seleccionar" multiple="false"
                                          allowTypes="/(\.|\/)(gif|jpe?g|png)$/"
                                          uploadLabel="Subir"
                                          cancelLabel="Cancelar"
                                          update=":tab:formSubirImagen :menu:menu"/> 
                        </h:form>

                    </p:dialog>

                </div>
                 <div>
                    <p:dialog widgetVar="mapDialog" onShow="myMap.checkResize();getLocationFromAdress()" modal="true" 
                              showEffect="fade" width="425" height="450">
                            <script type="text/javascript"
                                    src="http://maps.googleapis.com/maps/api/js?key=AIzaSyAIvenuSuB8qlfz056q69ddMHJIdqra2sc&amp;sensor=false">
                            </script> 
                            <p:gmap center="-31.41,-64.20"
                                    zoom="15" type="HYBRID" style="width:400px;height:400px;"
                                    widgetVar="myMap" model="#{modUsuario.editableGMap}"  >

                            </p:gmap>
                        <p:commandButton type="button" icon="ui-icon-pin-s" 
                                         value="Esta es mi ubicación correcta" 
                                         onclick="updateCoordinatesEditUser();mapDialog.hide()"/>

                    </p:dialog>

                </div>   

            </ui:define>

        </ui:composition>

    </body>
</html>
